<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>分类首页</title>

  <!-- bootstrap -->
  <link rel="stylesheet" href="./assets/css/bootstrap.min.css" />

  <!-- animate.css -->
  <link rel="stylesheet" href="./assets/css/animate.min.css" />

  <!-- MUI -->
  <link rel="stylesheet" href="./assets/plugins/mui/css/mui.min.css">

  <!-- 下拉刷新和上拉加载插件 -->
  <link rel="stylesheet" href="./assets/plugins/mescroll/mescroll.min.css">

  <!-- 重置样式 -->
  <link rel="stylesheet" href="./assets/css/reset.css" />

  <!-- 公共样式 -->
  <link rel="stylesheet" href="./assets/css/common.css" />

  <!-- 页面独立的 -->
  <link rel="stylesheet" href="./assets/css/index.css" />
</head>
<style>
  .item button:nth-child(1) {
    right: 78px;
  }
  .action{
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  .action a{
    width: 100%;
    height: 5rem;
    line-height: 3.5rem;
    font-size: 2rem;
  }
  .action a:hover{
    text-decoration: none;
  }
  .action a:active{
    text-decoration: none;
    color: #fff;
  }
</style>

<body>
  <!-- 搜索 -->
  <div class="search">
    <div class="box">
      <div class="icon">
        <span class="glyphicon glyphicon-search"></span>
      </div>

      <input class="input" placeholder="请输入关键字" id="keywords" />

      <button class="btn keywords" size="mini" type="default">搜索</button>
    </div>
  </div>

  <!-- 列表 -->
  <div id="typelist" class="mescroll">
    <ul class="mui-table-view"></ul>
  </div>

  <div class="action">
    <a href="typeAdd.html" class="mui-btn mui-btn-danger">添加分类</a>
  </div>

</body>

</html>
<!-- jquery  -->
<script src="./assets/js/jquery.min.js"></script>

<!-- bootstrap -->
<script src="./assets/js/bootstrap.min.js"></script>

<!-- wow.js -->
<script src="./assets/js/wow.min.js"></script>

<!-- MUI -->
<script src="./assets/plugins/mui/js/mui.min.js"></script>

<!-- axios请求 -->
<script src="./assets/plugins/axios/axios.js"></script>
<script src="./assets/plugins/axios/request.js"></script>

<!-- 下拉刷新和上拉加载插件 -->
<script src="./assets/plugins/mescroll/mescroll.min.js"></script>

<!-- cookie -->
<script src="./assets/plugins/cookie.js"></script>

<!-- 校验用户是否登陆 -->
<script src="./assets/plugins/helper.js"></script>


<script>
  new WOW().init();
  let Business = cookie.get('Business') ? JSON.parse(cookie.get('Business')) : "{}";
  console.log(Business);

  let page = 1;
  let limit = 5;
  //第一个参数"mescroll"对应上面布局结构div的id
  var mescroll = new MeScroll("typelist", {
    down: {
      //下拉刷新的回调,别写成downCallback(),多了括号就自动执行方法了
      callback: downCallback
    },
    up: {
      //上拉加载的回调
      callback: upCallback,
      //以下是一些常用的配置,当然不写也可以的.
      page: {
        //当前页 默认0,回调之前会加1; 即callback(page)会从1开始
        num: 0,
        //每页数据条数,默认10
        size: limit
      }
    }
  });

  // 下拉调用方法
  function downCallback() {
    // 清除之前分页状态，重新加载数据
    mescroll.resetUpScroll();
    $("#typelist ul").html('')
  }
  // 搜索框点击和按下enter键加载
  $(".keywords").click(function () {
    downCallback()
  })
  $(window).keydown(function (event) {
    if (event.keyCode == 13) {
      downCallback()
    }
  })

  // 上拉调用方法
  async function upCallback(pages) {
    page = pages.num
    limit = pages.size
    let result = await POST({
      url: 'card/type/index',
      params: {
        page: page,
        limit: limit,
        businessid: Business.id,
        search: $("#keywords").val()
      }
    })

    if (result.code == 0) {
      mui.toast(result.msg);
      return false;
    }


    // console.log(result);
    // 如果响应成功，从请求中获取总记录数count
    let count = result.data.count;
    //获取数据列表array list  1:{id: 11, name: '母婴'}
    let data = result.data.list
    mescroll.endBySize(data.length, count);

    renderingEvent(data)
  }
  // 添加分类列表
  function renderingEvent(data) {
    data.forEach((item) => {
      let str = `
                <li class="mui-table-view-cell item">${item.name}
                    <button type="button" class="mui-btn mui-btn-primary" onclick="edit(${item.id})">编辑</button>
                    <button type="button" class="mui-btn mui-btn-danger" onclick="dele(${item.id}, '${item.name}')">删除</button>
                </li>`
      $("#typelist ul").append(str)
    })
  }

  // 编辑 跳转编辑页面
  function edit(id) {
    location.href = `typeEdit.html?typeid=${id}`
  }

  // 删除
  function dele(id, name) {
    mui.confirm(`确认删除${name}?`, '删除', ['确定', '取消'], async function (e) {
      // e.index按钮索引，确定0 取消1
      if (e.index == 0) {
        let res = await POST({
          url: 'card/type/del',
          params: {
            businessid: Business.id,
            typeid: id
          }
        })
        if (res.code == 1) {
          mui.toast(res.msg);
          downCallback();
        } else {
          mui.toast(res.msg);
        }

      }
    })
  }

</script>